/** @jsxImportSource @emotion/react */
import * as React from "react";
import {CCell, Table, TableBody, TableRow, Text,} from "customize-easy-ui-component";
import {InspectRecordLayout, InternalItemProps, RepLink, twoForkSelect, useItemInputControl} from "../../common/base";
import {TailMenRowIspCheck,} from "../../contain/rarelyVary";
import {useMeasureInpFilter} from "../../common/hooks";
import {Each_ZdSetting, tabIBlistCb, tabIDateCb, useTableEditor} from "../../hook/useRepTableEditor";

const 种类选=['第二类压力容器', ];
const 类别选=['固定式压力容器', ];
const config容器清单=[
  ['设备种类','t',100,tabIBlistCb(种类选)],['设备类别','s',110,tabIBlistCb(类别选)],['产品名称','n',180,tabIBlistCb([])],['设备代码','M',100],
  ['产品编号','H',100], ['制造日期','d',90,tabIDateCb()],['制造单位名称','u',240,tabIBlistCb([]) ]
] as Each_ZdSetting[];

const itemA容器单=['容器表',];
export const ContainerInfo =
    React.forwardRef((
        {children, show, alone = true, refWidth, label, }: InternalItemProps, ref
    ) => {
      const [getInpFilter]=useMeasureInpFilter(null,itemA容器单,);
      const {inp, setInp} = useItemInputControl({ ref });
      const headview=<Text variant="h5">
        （压力容器清单）
      </Text>;
      const [render]=useTableEditor({inp,setInp,
            headview, config: config容器清单, table:'容器表', maxRf:2});
      return (
          <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show}
                               alone={alone} label={label!}>
            <Text variant="h5">{label}：</Text>
            {render}
            {children}
          </InspectRecordLayout>
      );
  });

/** 表格倒置：垂直布局（没有常规 水平走向方向 的表头），表头在左侧Y轴方向布局！
 * 除了头部文字，其他较为通用的模型。
 * 【布局 @ 特别】 剩下内容太少了 ,打印一整张纸张的 尽量的居中；
 * */
export const ContainerInfoVw = ({orc, rep}: { orc: any, rep: any }
) => {
  const rafts=4;    //几列栏 组合的
  const tag='ContainerInfo';
  const fixed= ["12.1%", "22%", "22%", "22%","%"] ;
  const config=config容器清单;
  const dataArr=orc?.容器表 || [];
  const recNums = dataArr.length;
  //首先拆分区块：分组。
  const blocks = Math.ceil(recNums / rafts) || 1;     //倒转的，每5行的一块块布局:固定的5个日期汇集打印的一行。
  const padding=6;    //最少也要预留高度 6rem
  return <div css={{display: 'flex',flexDirection: 'column',justifyContent: 'space-between',
          "@media print": {minHeight: '100vh'},
  }}>
    <div css={{margin: 'auto'}}>
      <div css={{"@media print": {paddingBottom: `${padding}rem`, pageBreakInside: 'avoid'}}}>
        <Text id='ContainerInfo' variant="h2" css={{textAlign: 'center', marginTop: '1rem',
        }}>撬装式承压设备系统内压力容器基本情况</Text>
        <Text variant="h4" css={{textAlign:'center'}}>（压力容器清单）</Text>
        <div css={{display: 'flex', justifyContent: 'space-between'}}>
          <Text></Text>
          <Text>证书编号：{rep.isp.no}</Text>
        </div>
      </div>
       {(new Array(blocks)).fill(null).map((_, b: number) => {
          const SumRowB = config.length;
          const dates = [] as any;      // const condits=[][] as any[];
          //底下condits[i].concat 不能用push函数来替代的：        let condit1: JSX.Element[]=[];
          let condits = Array(SumRowB).fill([]);
          (new Array(rafts)).fill(null).forEach((_, d:number) => {
            if(b*rafts +d>=recNums){
              //空白
              config.forEach(([title,{f:field,N:descnode}]: any, i: number) =>{
                condits[i]=condits[i].concat(<CCell key={b*rafts +d+''+i}></CCell>);
              });
              dates.push(<CCell key={b*rafts +d}>以下空白</CCell>);
            }
            else{
              const row=dataArr[b*rafts +d];
              config.forEach(([title,field]: any, i: number) =>{
                condits[i]=condits[i].concat(<CCell key={b*rafts +d+''+i}>{twoForkSelect(row?.[field])}</CCell>);
              });
              dates.push(<CCell key={b*rafts +d}>{b*rafts +d +1}</CCell>);
            }
          });

          return <div key={b}>
            {0 !== b && <div css={{height: '0.5rem',"@media print": {paddingBottom: `${padding}rem`, pageBreakInside: 'avoid'}}}>
              <div css={{display: 'flex', justifyContent: 'space-between'}}>
                <Text>&nbsp;</Text>
              </div>
            </div>
            }
            <Table fixed={ fixed }
                        css={{borderCollapse: 'collapse', "@media print": {marginTop: `-${padding}rem`}}} tight miniw={800}>
              <TableBody>
                  <RepLink rep={rep} tag={tag}>
                      <TableRow>
                          <CCell>序号</CCell>
                          {dates}
                      </TableRow>
                      {config.map(([title, ]: any, i: number) => {
                          return <TableRow key={i}>
                              <CCell>{title}</CCell>
                              {condits[i]}
                          </TableRow>
                      })}
                  </RepLink>
              </TableBody>
            </Table>
          </div>;
       })}
      <TailMenRowIspCheck orc={orc} rep={rep} />
    </div>
  </div>;
};
